<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>天冷加衣</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Comic Sans MS", "Arial Rounded MT Bold", sans-serif;
    }
    
    body {
      width: 100vw;
      height: 100vh;
      background-color: #f0f4ff;
      background-image: 
        radial-gradient(#e8f0ff 2px, transparent 2px),
        radial-gradient(#ffeef2 2px, transparent 2px);
      background-size: 50px 50px;
      background-position: 0 0, 25px 25px;
      overflow: hidden;
      position: relative;
    }
    
    .card {
      position: absolute;
      border-radius: 12px;
      padding: 18px 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      cursor: pointer;
      transition: all 0.3s ease;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.6);
    }
    
    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        135deg,
        rgba(255,255,255,0.1) 0%,
        rgba(255,255,255,0) 50%
      );
      z-index: 1;
    }
    
    .card:hover {
      transform: scale(1.1) rotate(0deg) !important;
      z-index: 20 !important;
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }
    
    .card .text {
      text-align: center;
      color: #333;
      font-size: 18px;
      z-index: 2;
      line-height: 1.5;
      text-shadow: 0 1px 2px rgba(255,255,255,0.8);
    }
    
    .deco {
      position: absolute;
      z-index: 1;
      opacity: 0.8;
    }
    
    .ribbon {
      position: absolute;
      width: 30px;
      height: 30px;
      z-index: 1;
    }
    
    .sparkle {
      position: absolute;
      z-index: 1;
      color: rgba(255, 215, 0, 0.8);
      text-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
    }
    
    .music-control {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #ff7eb3;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: 0 4px 12px rgba(255, 126, 179, 0.4);
      cursor: pointer;
      z-index: 100;
      transition: all 0.3s ease;
      border: 2px solid white;
    }
    
    .music-control:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 16px rgba(255, 126, 179, 0.5);
    }
  </style>
</head>
<body>
  <div class="music-control" id="musicBtn">
    ▶
  </div>

  <audio id="bgm" loop preload="auto">
    <source src="C:\Users\LEGION\Desktop\作业\vscode\11月2日.MP3" type="audio/mpeg">
    您的浏览器不支持音频播放，请更新浏览器版本
  </audio>

  <script>
    const musicBtn = document.getElementById('musicBtn');
    const bgm = document.getElementById('bgm');
    let isPlaying = false;

    musicBtn.addEventListener('click', () => {
      if (isPlaying) {
        bgm.pause();
        musicBtn.textContent = '▶';
      } else {
        bgm.play().catch(err => {
          alert('由于浏览器限制，请点击页面后再尝试播放音乐～');
          musicBtn.textContent = '▶';
          isPlaying = false;
        });
        musicBtn.textContent = '⏸';
      }
      isPlaying = !isPlaying;
    });

    const messages = [
      "我超想你的的说～",
      "今天也要好好吃饭哦！",
      "记得多喝水呐～",
      "早点休息啦，不许熬夜！",
      "今天也要元气满满！",
      "要好好照顾自己哟～",
      "别太累啦，休息一下嘛",
      "天气凉了，注意保暖喵～",
      "想听你讲今天的故事呢",
      "加油！你超棒的！",
      "有空一起去散步吧～",
      "要常常微笑哦～",
      "我在这里等你哟",
      "一切都会好起来的啦",
      "你对我来说很重要的说",
      "多出去晒晒太阳吧～",
      "别给自己太大压力呀",
      "我会一直支持你的！",
      "路上要注意安全呐",
      "有空联系我好不好～",
      "今天的你也很可爱哦！",
      "记得吃水果呀～",
      "累了就停下来休息嘛",
      "一直在想你呢～",
      "要保持好心情哟！",
      "今天也辛苦啦～",
      "看到你就很开心呢",
      "要一直幸福下去呀",
      "有烦恼可以跟我说哦",
      "你一笑世界都亮了～"
    ];
    
    const colors = [
      'rgba(255, 228, 235, 0.95)',
      'rgba(221, 240, 255, 0.95)',
      'rgba(227, 255, 236, 0.95)',
      'rgba(255, 248, 225, 0.95)',
      'rgba(245, 232, 255, 0.95)',
      'rgba(255, 236, 221, 0.95)',
      'rgba(232, 251, 255, 0.95)',
      'rgba(255, 230, 242, 0.95)'
    ];
    
    const decorations = [
      { type: 'symbol', value: '♡', color: '#ff7eb3', size: '20px', pos: 'top-right' },
      { type: 'symbol', value: '★', color: '#ffd700', size: '22px', pos: 'bottom-left' },
      { type: 'symbol', value: '☆', color: '#ffd700', size: '18px', pos: 'top-left' },
      { type: 'symbol', value: '♪', color: '#7eb3ff', size: '20px', pos: 'bottom-right' },
      { type: 'symbol', value: '✧', color: '#b39ddb', size: '18px', pos: 'top-right' },
      { type: 'symbol', value: '❀', color: '#80cbc4', size: '22px', pos: 'bottom-left' },
      { type: 'ribbon', color: '#ff7eb3', pos: 'top-left' },
      { type: 'ribbon', color: '#7eb3ff', pos: 'top-right' },
      { type: 'sparkle', value: '✦', size: '24px', pos: 'bottom-right' },
      { type: 'sparkle', value: '✨', size: '20px', pos: 'top-left' }
    ];
    
    function createCard() {
      const card = document.createElement('div');
      card.className = 'card';
      
      const msg = messages[Math.floor(Math.random() * messages.length)];
      const color = colors[Math.floor(Math.random() * colors.length)];
      
      const width = 160 + Math.random() * 60;
      const height = 90 + Math.random() * 40;
      card.style.width = `${width}px`;
      card.style.height = `${height}px`;
      
      const maxLeft = window.innerWidth - width;
      const maxTop = window.innerHeight - height;
      card.style.left = `${Math.random() * maxLeft}px`;
      card.style.top = `${Math.random() * maxTop}px`;
      
      const rotate = (Math.random() * 10 - 5) + 'deg';
      card.style.transform = `rotate(${rotate})`;
      
      card.style.zIndex = Math.floor(Math.random() * 10);
      
      card.style.backgroundColor = color;
      
      const textDiv = document.createElement('div');
      textDiv.className = 'text';
      textDiv.textContent = msg;
      card.appendChild(textDiv);
      
      const decoCount = Math.floor(Math.random() * 2) + 1;
      for (let i = 0; i < decoCount; i++) {
        const deco = decorations[Math.floor(Math.random() * decorations.length)];
        let decoEl;
        
        if (deco.type === 'symbol') {
          decoEl = document.createElement('div');
          decoEl.className = 'deco';
          decoEl.textContent = deco.value;
          decoEl.style.color = deco.color;
          decoEl.style.fontSize = deco.size;
        } else if (deco.type === 'ribbon') {
          decoEl = document.createElement('div');
          decoEl.className = 'ribbon';
          decoEl.style.background = deco.color;
          decoEl.style.clipPath = 'polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%)';
        } else if (deco.type === 'sparkle') {
          decoEl = document.createElement('div');
          decoEl.className = 'sparkle';
          decoEl.textContent = deco.value;
          decoEl.style.fontSize = deco.size;
        }
        
        if (deco.pos === 'top-right') {
          decoEl.style.top = '5px';
          decoEl.style.right = '5px';
        } else if (deco.pos === 'bottom-left') {
          decoEl.style.bottom = '5px';
          decoEl.style.left = '5px';
        } else if (deco.pos === 'top-left') {
          decoEl.style.top = '5px';
          decoEl.style.left = '5px';
        } else if (deco.pos === 'bottom-right') {
          decoEl.style.bottom = '5px';
          decoEl.style.right = '5px';
        }
        
        card.appendChild(decoEl);
      }
      
      card.addEventListener('click', () => {
        card.style.opacity = '0';
        card.style.transform = `scale(0) rotate(${rotate})`;
        setTimeout(() => {
          if (document.body.contains(card)) {
            document.body.removeChild(card);
          }
          createCard();
        }, 300);
      });
      
      document.body.appendChild(card);
    }
    
    function initCards() {
      const screenArea = window.innerWidth * window.innerHeight;
      const cardArea = 190 * 110;
      const count = Math.floor(screenArea / cardArea) + 25;
      
      for (let i = 0; i < count; i++) {
        setTimeout(createCard, i * 150);
      }
    }
    
    window.onload = initCards;
    
    window.onresize = () => {
      document.querySelectorAll('.card').forEach(card => {
        if (document.body.contains(card)) {
          document.body.removeChild(card);
        }
      });
      initCards();
    };
  </script>
</body>
</html>